<template>
    <nut-tabs v-model="value" align="left">
        <nut-tab-pane title="全部" pane-key="1">
        </nut-tab-pane>
        <nut-tab-pane title="游戏分区" pane-key="2">
        </nut-tab-pane>
        <nut-tab-pane title="热门话题" pane-key="3">
        </nut-tab-pane>
        <nut-tab-pane title="我关注的" pane-key="4">
        </nut-tab-pane>
    </nut-tabs>
    <all-page v-show="value==='1'"></all-page>
    <game-page v-show="value==='2'"></game-page>
    <topic-page v-show="value==='3'"></topic-page>
    <follow-page v-show="value==='4'"></follow-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import AllPage from './components/allPage.vue'
import GamePage from './components/gamePage.vue'
import TopicPage from './components/topicPage.vue'
import  FollowPage  from './components/followPage.vue'

const value = ref('1')

</script>

<style scoped lang="scss">
.nut-tab-pane{
    padding: 0;
    background-color: #1c1c1c;
    color: #fff;
}
</style>
